import { Component,OnInit,ElementRef,Output,EventEmitter,Input,SimpleChange } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import lodash from 'lodash';

@Component({
    selector: 'app-device-menu',
    templateUrl: './model-menu.component.html',
    styleUrls: ['./model-menu.component.css']
})
export class DeviceMenuComponent implements OnInit {
    @Output() clickImg=new EventEmitter();
    @Input() projectId: string;
    @Input() canvasId: string;

    constructor(private http: HttpClient, private elementRef: ElementRef) {
        // this.loadData();
      }

    dataList: any[]=[];
    currentPage = 1;
    pageSize = 10000;
    currentModel: any;
    total: number;
    searchVal: string;

    relationList: any[];

    setImageMode(model){
        this.currentModel=model;
        this.clickImg.emit(model);
        console.log(model);
    }

    isModeActive(id){
        return this.currentModel && this.currentModel.id===id;
    }

    loadData() {
        if((this.currentPage-1)*this.pageSize>this.total){
            return;
        }
        this.getData(this.currentPage, this.pageSize).then(data => {
            console.log(data);
          this.dataList = this.dataList.concat(data);
          this.currentPage++;
        });
    }

    getData(pageIndex: number, pageSize: number) {
        console.log('收到了吗',this.projectId);
        return new Promise((resolve,reject)=>{
            // '/entityApi/device/relation/chart/device/list'
            this.http.post('/deviceApi/device/listByConditionPage',{
                current: pageIndex,
                deviceName: this.searchVal,
                size:pageSize,
                projectId:this.projectId,
                tenantId:'1369559970221985794'
              }).subscribe((res: any)=>{
                if(res.code===200){
                    const records=res.data.list.map(r=>({
                        ...r,
                        deviceId:r.id,
                        defineType: 'instance',
                        src:'assets/images/device.png'
                    }));
                    this.total=res.data.total;
                    resolve(records);
                }

              });
        });
    }

    refreshDevice(){
        this.searchVal='';
        this.currentPage=1;
        this.total=0;
        this.dataList=[];
        this.loadData();
    }

    linkedChart(deviceId,chartId){

        const index = this.dataList.findIndex(d => d.id === deviceId);
        if (index > -1) {
            this.dataList[index].chartId = chartId;
            // this.dataList[index].entityTypeId=result.entityTypeId;
        }

    }

    onEnter(clear=false) {
        if(clear){
            this.searchVal='';
        }
        this.currentPage=1;
        this.total=0;
        this.dataList=[];
        this.loadData();
        // console.log('Enter key pressed with value:', this.searchVal);
    }

    clearActive(){
        this.currentModel=null;
    }

    // loadRelation(){
    //     this.http.post('/entityApi/device/scada/relation',{
    //         page: 1,
    //         chartId: this.canvasId,
    //         size:10000,
    //         tenantId:'1369559970221985794'
    //       }).subscribe((res: any)=>{
    //         if(res.code===200){
    //             const records=res.data.records;
    //             console.log(records);
    //         }
    //       });
    // }


    onScroll=lodash.throttle(function(event) {
        const element = event.target;
        const atBottom = element.scrollHeight - element.scrollTop < element.clientHeight+20;
        if (atBottom) {
          this.loadData();
        }
    },500);


    ngOnInit() {
        console.log('初始化',this.projectId);
    }

    ngAfterViewInit(){
        console.log('页面初始化',this.projectId);
    }

    ngOnChanges(changes: SimpleChange){
        if (changes['projectId']) {
            console.log('值变化了',this.projectId);
            if(this.projectId){
                this.loadData();
            }
        }
        // if (changes['canvasId']) {
        //     console.log('值变化了',this.canvasId);
        //     if(this.canvasId){
        //         this.loadRelation();
        //     }
        // }
      }


}
